<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="订单类型">
				<el-select v-model="queryParams.orderType" clearable>
					<el-option label="普通订单" value="1"></el-option>
					<el-option label="多人拼团" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="支付状态">
				<el-select v-model="queryParams.payStatus" clearable>
					<el-option label="未支付" value="0"></el-option>
					<el-option label="已支付" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="配送方式">
				<el-select v-model="queryParams.deliveryWay" clearable>
					<el-option label="普通快递" value="1"></el-option>
					<el-option label="上门自提" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button>
				<el-button @click="restQuery">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" :printBtn="true" :printRef="printRef"
				@search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<Deliver ref="refDeliver" @handleSuccess="initPage"></Deliver>
		<el-tabs v-model="activeName" type="card" @tab-click="tabHandle">
			<el-tab-pane label="全部" name="all"></el-tab-pane>
			<el-tab-pane label="待付款" name="1"></el-tab-pane>
			<el-tab-pane label="待发货" name="2"></el-tab-pane>
			<el-tab-pane label="待收货" name="3"></el-tab-pane>
			<el-tab-pane label="已完成" name="4"></el-tab-pane>
			<el-tab-pane label="交易已关闭" name="11"></el-tab-pane>
		</el-tabs>
		<!-- 列表 -->
		<el-table ref="printRef" v-loading="loading" :data="tableData" border>
			<el-table-column prop="orderItemList" label="订单信息" width="450">
				<template #default="scope">
					<el-row :gutter="24" v-for="(item, index) in scope.row.orderItemList" :key="index" class="order-item">
						<el-col :span="4">
							<el-image style="width: 60px; height: 60px" :src="item.picUrl" fit="cover"
								:preview-teleported="true"></el-image>
						</el-col>
						<el-col :span="15">
							<span class="overflow-line-clamp-2 name">
								<el-tag v-if="scope.row.orderType != '1'" type="danger">
									{{ scope.row.orderType == '2' ? '多人拼团' : '' }}
								</el-tag>
								{{ item.spuName }}
							</span>
							<p>{{ item.specsInfo }}</p>
							<p>
								<span style="color: red" v-if="item.couponPrice > 0"> 优惠券减免：-{{ item.couponPrice }}元 </span>
							</p>
						</el-col>
						<el-col :span="5">
							<span style="color: #f56c6c">{{ item.paymentPrice }}元</span>
							<p>x{{ item.buyQuantity }}</p>
							<el-tag type="danger" effect="light" round v-if="item.status != '0'">
								{{ item.statusDesc }}
							</el-tag>
						</el-col>
					</el-row>
				</template>
			</el-table-column>
			<el-table-column prop="userInfo" label="用户信息" width="120" show-overflow-tooltip>
				<template #default="scope">
					<span style="color: var(--el-color-primary)"> {{ scope.row.userInfo.nickName }}({{
						scope.row.userInfo.phone }}) </span>
				</template>
			</el-table-column>
			<el-table-column prop="orderType" label="订单类型" align="center">
				<template #default="scope">
					{{ scope.row.orderType == '1' ? '普通订单' : scope.row.orderType == '2' ? '多人拼团' : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="deliveryWay" label="配送方式" align="center">
				<template #default="scope">
					{{ scope.row.deliveryWay == '1' ? '普通快递' : scope.row.deliveryWay == '2' ? '上门自提' : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" align="center">
				<template #default="scope">
					<el-tag :type="scope.row.status == '4' ? 'success' : 'danger'" round>
						{{ scope.row.statusDesc }}
					</el-tag>
					<el-divider style="margin: 10px 0px" />
					<el-tag :type="scope.row.payStatus == '1' ? 'success' : 'danger'" round>
						{{ scope.row.payStatus == '1' ? '已支付' : '未支付' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="时间" width="250">
				<template #default="scope">
					<div>创建时间：{{ scope.row.createTime }}</div>
					<div v-if="scope.row.paymentTime">付款时间：{{ scope.row.paymentTime }}</div>
					<div v-if="scope.row.deliverTime">发货时间：{{ scope.row.deliverTime }}</div>
					<div v-if="scope.row.receiverTime">收货时间：{{ scope.row.receiverTime }}</div>
				</template>
			</el-table-column>
			<el-table-column prop="totalPrice" label="订单金额" width="220">
				<template #default="scope">
					<div>订单金额：￥{{ scope.row.totalPrice }}</div>
					<div>运费：+￥{{ scope.row.freightPrice }}</div>
					<div>优惠券：-￥{{ scope.row.couponPrice ? scope.row.couponPrice : 0 }}</div>
					<div style="color: red">支付金额：￥{{ scope.row.paymentPrice }}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200" align="center" fixed="right">
				<template #default="scope">
					<el-button link type="primary" v-auth="'mall:orderinfo:get'" @click="detail(scope.row)">
						<el-icon><ele-View /></el-icon> 详情 </el-button>
					<el-button link type="primary" v-auth="'mall:orderinfo:deliver'" v-if="scope.row.status == '2'"
						@click="deliverOrder(scope.row)">
						<el-icon><ele-Van /></el-icon>
						发货
					</el-button>
					<el-button link type="danger" v-auth="'mall:orderinfo:del'"
						v-if="scope.row.status == '11' && scope.row.payStatus == '0'" @click="del(scope.row.id)">
						<el-icon><ele-Delete /></el-icon>
						删除
					</el-button>
					<el-button link type="warning" v-auth="'mall:orderinfo:cancel'"
						v-if="scope.row.status == '1' && scope.row.payStatus == '0'" @click="cancel(scope.row.id)">
						<el-icon><ele-Delete /></el-icon>
						取消
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination v-model:total="page.total" v-model:currentPage="page.currentPage" v-model:pageSize="page.pageSize"
			@changePage="initPage"></pagination>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref, reactive, toRefs } from 'vue';
import { getPage, delObj, cancelObj } from '/@/api/mall/orderinfo';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	components: { Deliver: defineAsyncComponent(() => import('./deliver/index.vue')) },
	setup() {
		const data = reactive({
			queryParams: {
				orderType: '',
				payStatus: '',
				deliveryWay: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				pageSize: 20,
				ascs: [],
				descs: 'create_time',
			},
			tableData: [],
			activeName: 'all',
		});
		const $route = useRouter();
		const showSearch = ref(true);
		const loading = ref(false);
		const refForm = ref();
		const refDeliver = ref();
		const printRef = ref();
		const { tableData, queryParams, page, activeName } = toRefs(data);

		const initPage = async () => {
			loading.value = true;
			let params = {
				current: page.value.currentPage,
				size: page.value.pageSize,
				ascs: page.value.ascs,
				descs: page.value.descs,
				status: activeName.value == 'all' ? '' : activeName.value,
			};
			await getPage(Object.assign(params, queryParams.value))
				.then((response) => {
					tableData.value = response.data.data.records;
					page.value.total = response.data.data.total;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 重置搜索表单
		 */
		const restQuery = () => {
			queryParams.value = { orderType: '', payStatus: '', deliveryWay: '' };
		};
		/**
		 * 订单详情
		 */
		const detail = (row: any) => {
			$route.push({ path: '/orderinfo/info', query: { id: row.id } });
		};
		/**
		 * 删除按钮
		 */
		const del = (id: string) => {
			ElMessageBox.confirm('此操作将删除该订单，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delObj(id)
					.then((response) => {
						ElMessage.success('删除成功');

						initPage();
					})
					.catch(() => { });
			});
		};
		/**
		 * 取消订单
		 */
		const cancel = (id: string) => {
			ElMessageBox.confirm('此操作将取消该订单，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				cancelObj(id)
					.then((response) => {
						ElMessage.success('取消成功');
						initPage();
					})
					.catch(() => { });
			});
		};
		/**
		 * 订单状态切换
		 */
		const tabHandle = (event: any) => {
			activeName.value = event.paneName;
			initPage();
		};
		/**
		 * 发货
		 */
		const deliverOrder = (row: any) => {
			refDeliver.value.initPage(row.id, row.orderLogisticsId);
		};
		initPage();
		return {
			page,
			printRef,
			showSearch,
			loading,
			tableData,
			queryParams,
			refForm,
			refDeliver,
			activeName,
			del,
			cancel,
			detail,
			initPage,
			tabHandle,
			restQuery,
			deliverOrder,
		};
	},
});
</script>
<style scoped lang="scss">
.order-item {
	margin-left: 0px !important;
	margin-right: 0px !important;
	border: 1px solid #e4e7ed;
	padding: 5px;
	margin: 5px;
	border-radius: 4px;

	.name {
		color: #409eff;
	}
}
</style>
